<!-- 正面模板 -->
{{FrontSide}}  <!-- Anki内置变量：插入正面内容 -->

<!-- 背面模板 -->
<div class='back'>  <!-- 定义卡片背面容器 -->
{{背面}}  <!-- Anki变量：插入背面内容 -->

<pre class='mermaid'>  
flowchart LR  
    A[Start] --> B{Is it?}  
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]
</pre>

<pre class='mermaid'>mindmap
 root((爷爷))
  爸爸
  	孙子
  姑姑
   外孙
   外孙女
</pre>

<pre class='mermaid'>  
pie title Pets adopted by volunteers  
    "Dogs" : 386  
    "Cats" : 85
    "Rats" : 15
</pre>

<pre class='mermaid'>  
xychart-beta  
    title "Sales Revenue"  
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]  
    y-axis "Revenue (in $)" 4000 --> 11000  
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]  
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]  
</pre>

<!-- 遮罩层 -->
<div id="dragMask" class="drag-mask">  <!-- 可拖拽遮罩层容器 -->
<pre class='btm'>  <!-- 复习数据说明区域 -->
<span id='percentInse'>上次复习留存率	0÷0×100=0%</span>  <!-- 留存率显示元素 -->
<span>按钮	留存	预耗时	核心知识回忆状态</span>  <!-- 表头 -->
<i class='red'>重来	80%±	2:30±	竭尽全力仍难回忆</i>  <!-- 红色级别说明 -->
<i class='yg-yellow'>困难	≥85%	≤2:00	费力思索方能回忆</i>  <!-- 黄色级别说明 -->
<i class='green'>良好	≥90%	≤1:30	稍加思索便能回忆</i>  <!-- 绿色级别说明 -->
<i class='yg-blue'>简单	≥95%	≤1:00	无需思考瞬间回忆</i>  <!-- 蓝色级别说明 -->
</pre>

<!-- 统计结果区域 -->
<div id='stat' class='btm'></div>  <!-- 统计数据显示容器 -->
<ul class='btm'>  <!-- 颜色说明列表 -->
  <li  class='zd'>  <!-- 列表项 -->
    <i class='red'>红色(警告/错误：高唤醒度增强记忆，但可能引发焦虑)</i>  <!-- 红色说明 -->
  </li>
  <li>  <!-- 列表项 -->
    <i class='yellow'>黄色(注意/暂存：高可见性促进捕获注意力，但记忆保持较弱)</i>  <!-- 黄色说明 -->
  </li>
  <li>  <!-- 列表项 -->
    <i class='green'>绿色(通过/安全：正效价情绪提升记忆巩固，降低认知负荷)</i>  <!-- 绿色说明 -->
  </li>
  <li>  <!-- 列表项 -->
    <i class='blue'>蓝色(信息/学习：促进认知加工深度，增强长时记忆编码)</i>  <!-- 蓝色说明 -->
  </li>
</ul>

</div>
</div>

<script type="text/javascript">
(function() {  // 自执行函数封装统计和拖拽功能
// 核心统计功能（颜色标签和yg-*标签不重叠统计）
const calculateStats = () => {  // 定义统计函数
const clone = document.querySelector('.back').cloneNode(true);  // 克隆背面元素
// 移除无需统计的元素
clone.querySelectorAll('p, #dragMask, code, [class*="mermaid" i]').forEach(el => el.remove());  // 清理干扰元素

// 核心正则：仅匹配所有汉字（含生僻字）
const charRegex = /[\u4e00-\u9fff\u3400-\u4dbf\uf900-\ufaff\u20000-\u2a6df\u2a700-\u2b73f\u2b740-\u2b81f\u2b820-\u2ceaf\u2ceb0-\u2ebef]/g; 
// 剂量单位匹配
const unitRegex = /\d+\s*([gGkKmMlLμmgμg]+[a-zA-Z]?)/gi; 
// 移除【】括号内容
const bracketRegex = /【.*?】/g; 
// 移除HTML标签残留
const htmlTagRegex = /<[^>]+>/g; 

// 统计有效内容（仅汉字+专业单位）
const countContent = (text) => {  // 定义内容统计函数
const processedText = text
  .replace(htmlTagRegex, '')   // 移除HTML标签
  .replace(bracketRegex, '');  // 移除括号内容

const chineseChars = processedText.match(charRegex) || [];   // 匹配中文字符
const units = processedText.match(unitRegex) || [];         // 匹配单位
return chineseChars.length + units.length;                  // 返回总数量
};

// 标签统计（颜色标签和yg-*标签分开，不重叠）
const counters = {  // 统计计数器对象
colorTags: 0,        // 颜色类标签（需从记忆内容扣除）
ygTags: 0            // yg类标签（仅统计不扣除）
};

// 1. 统计颜色标签内容（排除yg-*标签）
const colorClone = clone.cloneNode(true);  // 克隆元素用于颜色标签统计
colorClone.querySelectorAll('[class*="red"], [class*="yellow"], [class*="blue"], [class*="green"]').forEach(tag => {
// 跳过同时包含yg-*的标签（避免重叠统计）
if (!tag.className.includes('yg-')) {  // 过滤yg-*标签
counters.colorTags += countContent(tag.textContent);  // 累加内容长度
}
});

// 2. 统计yg-*标签内容（排除颜色标签）
const ygClone = clone.cloneNode(true);  // 克隆元素用于yg标签统计
ygClone.querySelectorAll('[class*="yg-"]').forEach(tag => {
// 跳过同时包含颜色类的标签（避免重叠统计）
if (!tag.className.match(/red|yellow|blue|green/)) {  // 过滤基础颜色标签
counters.ygTags += countContent(tag.textContent);  // 累加内容长度
}
});

// 3. 计算总记忆基准（包含所有内容，去重）
const fullContent = clone.cloneNode(true);  // 完整克隆
const totalCount = countContent(fullContent.textContent);  // 计算总内容长度
const adjustedTotal = Math.max(1, totalCount);  // 确保最小值1

// 实际记忆内容 = 总基准 - 颜色标签内容
const memoryCount = Math.max(0, adjustedTotal - counters.colorTags);  // 计算实际记忆量
const retentionPercent = Math.floor(memoryCount / adjustedTotal * 100);  // 计算留存百分比

// 更新留存率显示
document.getElementById('percentInse').textContent = `上次复习留存率：	${memoryCount}÷${adjustedTotal}×100=${retentionPercent}%`;  // 更新DOM

// 获取stat元素并填充统计结果
const statElement = document.getElementById('stat');  // 获取统计容器
statElement.innerHTML = `  // 插入统计HTML
<span class='blue'>统计详情</span><br>
总汉字+单位数（基准，含所有内容）：${adjustedTotal}  <br>
颜色标签内容：${counters.colorTags} （不含yg-*标签）<br>
yg-*标签内容：${counters.ygTags} （不含颜色标签）<br>
实际记忆内容：${memoryCount} （总基准 - 颜色标签）  <br>
记忆留存率：${retentionPercent}%  
`;

// 控制台日志
console.log('【完整统计详情】');
console.log(`总基准内容（含所有内容）：${adjustedTotal}`);
console.log(`颜色标签内容：${counters.colorTags}（不含yg-*标签）`);
console.log(`yg-*标签内容：${counters.ygTags}（不含颜色标签）`);
console.log(`实际记忆内容：${memoryCount}（总基准 - 颜色标签）`);
console.log(`留存率：${retentionPercent}%`);
}

calculateStats();  // 执行统计函数

// 遮罩层拖拽功能
const initDragMask = () => {  // 初始化拖拽功能
  const mask = document.getElementById('dragMask');  // 获取遮罩层
  const backElement = document.querySelector('.back');  // 获取背面容器
  
  if (!mask || !backElement) return;  // 元素不存在则退出
  
  const getVHValue = () => window.innerHeight * 0.01;  // 计算1vh单位值
  let isDragging = false, startY = 0, scrollTop = 0;  // 拖拽状态变量
  
  mask.addEventListener('mousedown', (e) => {  // 鼠标按下事件
    isDragging = true;
    startY = e.clientY;  // 记录起始Y坐标
    scrollTop = parseInt(mask.style.top) || 0;  // 获取当前top值
    e.preventDefault();  // 阻止默认行为
  });
  
  mask.addEventListener('touchstart', (e) => {  // 触摸开始事件
    if (e.touches.length === 1) {  // 单指触摸
      isDragging = true;
      startY = e.touches[0].clientY;  // 获取触摸点Y坐标
      scrollTop = parseInt(mask.style.top) || 0;
      e.preventDefault();
    }
  });
  
  const handleMove = (clientY) => {  // 处理移动事件
    if (isDragging) {
      const deltaY = clientY - startY;  // 计算移动距离
      const newTop = scrollTop + deltaY;  // 计算新top值
      const maxTop = backElement.offsetHeight - (3 * getVHValue());  // 计算最大top值
      mask.style.top = `${Math.max(0, Math.min(newTop, maxTop))}px`;  // 设置新位置
    }
  };
  
  document.addEventListener('mousemove', (e) => handleMove(e.clientY));  // 鼠标移动监听
  document.addEventListener('touchmove', (e) => e.touches.length === 1 && handleMove(e.touches[0].clientY));  // 触摸移动监听
  document.addEventListener('mouseup', () => isDragging = false);  // 鼠标释放
  document.addEventListener('touchend', () => isDragging = false);  // 触摸结束
};

initDragMask();  // 初始化拖拽功能
})();  // 立即执行函数结束
</script> 

<script type="text/javascript">
  function loadMermaid() {  // 加载Mermaid图表库
    const script = document.createElement('script');  // 创建script元素
    script.type = 'text/javascript';  // 
    script.src = 'mermaid.min.js';  //设置本地源，需保存 mermaid.min.js 到Anki媒体文件目录
    //script.src = 'https://cdn.bootcdn.net/ajax/libs/mermaid/11.7.0/mermaid.min.js';  // 设置CDN源

    script.onload = function () {  // 加载完成后初始化
      mermaid.initialize({  // Mermaid配置
        startOnLoad: false,  // 禁止自动渲染
        securityLevel: 'loose',  // 宽松安全模式
        theme: 'dark'  // 暗色主题
      });

      const mermaidElements = document.querySelectorAll('pre.mermaid');  // 获取所有图表容器
      mermaidElements.forEach(el => {  // 处理换行符
        el.innerHTML = el.innerHTML.replace(/<br\s*\/?>/gi, '\n');
      });

      mermaidElements.length && mermaid.init(undefined, mermaidElements);  // 渲染图表
    };

    document.head.appendChild(script);  // 注入脚本
  }

  loadMermaid();  // 执行加载函数
</script>